<template>
  <transition name="dialog">
    <div v-if="beginPost">
      <form>
        <div :class="['promptPanel', 'grid_6']">
          <div class="prompot-title">
            <div>上传</div>
            <div class="prompot-close" @click="closePrompot">
              <i class="fa fa-close close-icon"></i>
            </div>
          </div>
          <div class="prompot-content ">
            <div class="tipMessage">
              {{postVedio.tipMessage}}
            </div>
            <div class="operator-item-panel clearfix">
              <div class="item-label"><label for="title">标题</label></div>
              <input id="title" class="item-input" v-model="postVedio.title"/>
            </div>
            <div class="operator-item-panel clearfix">
              <div class="item-label"><label for="desc">描述</label></div>
              <input id="desc" class="item-input" v-model="postVedio.desc"/>
            </div>
            <div class="operator-item-panel clearfix">
              <div class="item-label">
                <label for="vedio">视频</label></div>
              <input type="file" ref="vedioEl" id="vedio" name="vedioFile" class="item-input-upload" @change="tirggerVedioFile($event)"/>
            </div>
            <div class="operator-item-panel clearfix">
              <div class="item-label"><label >专题</label></div>
              <input type="radio" id="no" name="subject" class="item-input-radio" value="0" v-model="postVedio.check">
              <label for="no" class="item-input-radio">没</label>
              <input type="radio" id="yes" name="subject" class="item-input-radio" value="1" v-model="postVedio.check">
              <label for="yes" class="item-input-radio">有</label>
            </div>

            <div id="no-subject" v-if="noSubject">
              <div class="operator-item-panel clearfix">
                <div class="item-label"><label for="subject-name">专辑名</label></div>
                <input type="text" id="subject-name" class="item-input" v-model="postVedio.subjectName"/>
              </div>
              <div class="operator-item-panel clearfix">
                <div class="item-label"><label for="subject-type">类型</label></div>
                <input type="text" id="subject-type" class="item-input" v-model="postVedio.subjectType"/>
              </div>
              <div class="operator-item-panel clearfix">
                <div class="item-label"><label for="subject-desc">描述</label></div>
                <input type="text" id="subject-desc" class="item-input" v-model="postVedio.subjectDesc"/>
              </div>
            </div>
            <div id="has-subject" v-if="hasSubject">
              <div class="operator-item-panel clearfix">
                <div class="item-label"><label for="subjectname">专辑名</label></div>
                <select id="subjectname" class="item-input-select" v-model="postVedio.selectedContent" >
                  <option v-for=" (option, index) in postVedio.subjectItems" :value="option" :key="index">
                    {{ option.subjectName }}
                  </option>
                </select>
              </div>
            </div>
            <div class="single-btn">
              <a @click="uploadVedio($event)">上传</a>
            </div>
          </div>
        </div>
      </form>
      <div :class="['modal-backdrop', [beginPost == true? 'in': '']]" ></div>
    </div>
  </transition>

</template>

<script>
import axios from '../../node_modules/axios/dist/axios'
export default {
  props: {
    beginPost: {
      type: Boolean
    }
  },
  data () {
    return {
      postVedio: {
        check: '111',
        tipMessage: '',
        title: '',
        desc: '',
        vedioFile: '',
        subjectName: '',
        subjectType: '',
        subjectDesc: '',
        selectedContent: '',
        subjectItems: []
      }
    }
  },
  mounted () {
    this.loadData()
  },
  computed: {
    hasSubject () {
      return this.postVedio.check === '1'
    },
    noSubject () {
      return this.postVedio.check === '0'
    }
  },
  methods: {
    clearData () {
      this.postVedio.title = ''
      this.postVedio.desc = ''
      this.postVedio.subjectName = ''
      this.postVedio.subjectType = ''
      this.postVedio.subjectDesc = ''
      this.postVedio.vedioFile = ''
      this.postVedio.selectedContent = ''
      this.$refs.vedioEl.value = ''
    },
    closePrompot () {
      this.clearData()
      this.postVedio.tipMessage = ''
      this.$emit('close')
    },
    tirggerBackgroundImg (even) {
      this.postVedio.background = event.target.files[0]
    },
    tirggerVedioFile (even) {
      this.postVedio.vedioFile = event.target.files[0]
    },
    tirggerSubjectBackground (even) {
      this.postVedio.subjectBg = event.target.files[0]
    },
    loadData () {
      let _this = this
      axios.get('/vedioList/loadSubject').then(function (res) {
        if (res.data.status === 200) {
          _this.postVedio.subjectItems = res.data.datas
        } else {
          _this.postVedio.tipMessage = res.data.message
        }
      })
    },
    uploadVedio (event) {
      this.postVedio.tipMessage = '上传中...'
      event.preventDefault()
      let formData = new FormData()
      formData.append('title', this.postVedio.title)
      formData.append('desc', this.postVedio.desc)
      formData.append('vedioFile', this.postVedio.vedioFile)
      if (this.postVedio.check === '1') {
        formData.append('subjectName', this.postVedio.selectedContent.subjectName)
        formData.append('subjectType', this.postVedio.selectedContent.subjectType)
        formData.append('createTime', this.postVedio.selectedContent.createTime)
        formData.append('subjectDesc', this.postVedio.selectedContent.subjectDesc)
      } else {
        formData.append('subjectName', this.postVedio.subjectName)
        formData.append('subjectType', this.postVedio.subjectType)
        formData.append('createTime', new Date())
        formData.append('subjectDesc', this.postVedio.subjectDesc)
      }
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      let _this = this
      axios.post('/vedioList/uploadVedio', formData, config).then(function (res) {
        if (res.data.status === 200) {
          /* 这里做处理 */
          _this.postVedio.tipMessage = '上传成功'
          _this.clearData()
        } else {
          _this.clearData()
          _this.postVedio.tipMessage = res.data.message
        }
      })
    }
  }
}
</script>

<style scoped>
@import '../assets/css/login-register.css';
</style>
